<template>
  <div>
    <!-- 左侧菜单 -->
    <div class="detail_box">
      <!-- 操作 -->
      <div class="operate_box">
        <div class="btn_box">
          <span @click="openPopup('')" class="operate_btn search_btn">新增</span>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table_box">
        <el-table
          :data="tableInfo"
          :header-cell-style="tableHeader"
          border
          ref="multipleTable"
          style="width: 100%;"
          tooltip-effect="dark"
          v-loading="loading">
          <el-table-column
            label="ID"
            prop="id"
            width="80">
          </el-table-column>
          <el-table-column
            label="更新时间"
            prop="modifyTime"
            sortable
            width="160">
            <template slot-scope="scope">
              <p style="text-align: left">{{ formatTime(scope.row.modifyTime) }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="key"
            prop="key">
          </el-table-column>

          <el-table-column
            label="所属账号"
            prop="account">
            <template slot-scope="scope">
              <p style="text-align: left">{{scope.row.account?scope.row.account:'——'}}</p>
            </template>
          </el-table-column>

          <el-table-column
            label="排序"
            prop="sort">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope" v-if="btn&&(btn.detail || btn.update || btn.delete)">
              <div class="table_btn">
                <span @click="openPopup(scope.row.id,1)" class="change_info" v-if="btn.detail">详情</span>
                <span @click="openPopup(scope.row.id,2)" class="change_info" v-if="btn.update">编辑</span>
                <span @click="deleteItem(scope.row.id)" class="change_info delete_btn" v-if="btn.delete">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="record_page">
        <span class="page_count">共<i>{{ totals }}</i>条</span>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15, 20, 30, 40]"
          :total="totals"
          @current-change="getTableInfo"
          @size-change="sizeChange"
          background
          layout="prev, pager, next, sizes,jumper">
        </el-pagination>
      </div>
    </div>
    <edit :mid="keyId" @listenToChild="listenToEdit" v-if="isPop"></edit>
    <detail :mid="keyId" @listenToChild="listenToEdit" v-if="isDetail"></detail>
  </div>
</template>

<script>
import edit from "./edit";
import detail from "./detail";
import commons from "@/utils/common";
import {getBtn} from "@/utils/btnAuth";
import {listData, delData} from "@/api/config/gaode";

export default {
  name: 'scottKey',
  components: {
    edit,
    detail
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 15,
      totals: 0,
      loading: false,
      keyId: '',
      isPop: false,
      isDetail: false,
      tableInfo: [],
      btn: {},
    }
  },
  mounted() {
    this.btn = getBtn();
    if (this.btn.query) {
      this.getTableInfo(1);
    }
  },
  methods: {
    getTableInfo(page) {
      let that = this;
      that.loading = true;
      that.currentPage = page;
      let queryParams = {
        limit: that.pageSize,
        page: page,
      };
      listData(queryParams).then(res => {
        that.tableInfo = res.list ? res.list : [];
        that.totals = res.count;
        that.loading = false;
      }).catch((e) => {
        that.tableInfo = [];
        that.totals = 0;
        that.loading = false;
      });
    },

    //删除
    deleteItem(id) {
      let that = this;
      that.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delData(id).then(res => {
          that.getTableInfo(that.currentPage);
          that.$message.success({
            message: '删除成功！',
            duration: 1500
          });
        }).catch((e) => {
        });
      }).catch(() => {
      });
    },

    // 打开弹窗
    openPopup(id, type) {
      this.keyId = id;
      if (type === 1) {
        this.isDetail = true;
      } else {
        this.isPop = true;
      }
    },

    listenToEdit(e) {
      this.isPop = false;
      this.isDetail = false;
      if (e.refresh) {
        this.getTableInfo(this.currentPage)
      }
    },

    formatTime(time) {
      return commons.formatTime(time)
    },

    sizeChange(val) {
      this.pageSize = val;
      this.getTableInfo(1)
    },

    // 设置table标题居中
    tableHeader({row, column, rowIndex, columnIndex}) {
      return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600;'
    },
  }
}
</script>

<style scoped>

</style>
